<template>
  <el-dialog :visible.sync="open" @close="close" :title="title" width="80%" append-to-body destory-on-close>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
      <el-form-item label="预案类型" prop="aerodromeid">
        <el-input type="text" v-model="queryParams.keyword" placeholder="请输入关键词" :style="{ width: '100%' }"> </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list">
      <el-table-column label="预案名称" align="center" prop="planName" />
      <el-table-column label="当前版本" align="center" prop="version" />
      <el-table-column label="事件类型" align="center" prop="eventType" />
      <el-table-column label="事件等级" align="center" prop="eventGrade" />
      <el-table-column label="所属部门" align="center" prop="deptName" />
      <el-table-column label="操作" align="center" fixed="right" width="120">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-check" @click="handleSelectPlan(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getPlans" />
  </el-dialog>
</template>
<script>
import dialogMixin from "@/mixins/dialogMixin";
import { getPlanList } from "@/api/plan/caacPlan.js";

export default {
  name: "PlanPickerDialog",
  mixins: [dialogMixin],
  dicts: ["plantypecode_dict"],
  components: {},
  props: [],
  data() {
    return {
      queryParams: {
        planType: "",
      },
      title: "",
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getPlans();
  },
  mounted() {},
  methods: {
    getPlans() {
      getPlanList(this.queryParams).then(res => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    showDialog() {
      this.title = "选择预案";
      this.open = true;
    },
    handleQuery() {
      this.getPlans();
    },
    handleSelectPlan(data) {
      this.$emit("handleOk", data);
      this.open = false;
    },
  },
};
</script>
<style></style>
